<!--
 * @Description: 供应链订单列表
 * @Author: Kerwin
 * @Date: 2025-04-27 17:30:11
 * @LastEditTime: 2025-05-30 12:01:39
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view>
    <view class="header">
      <van-tabs
        :active="current"
        @change="handleOrderChange"
        color="#FF6C18"
        title-inactive-color="#666"
        title-active-color="#FF6C18"
      >
        <van-tab :title="`${zt.name}`" v-for="zt in stateList"></van-tab>
      </van-tabs>
      <view style="text-align: right; margin: 20rpx">
        <!-- 重新加载图标 -->
        <u-icon
          color="black"
          name="reload"
          size="40"
          @click="handleGetOrder"
          style="cursor: pointer"
        ></u-icon>
      </view>
    </view>
    <view class="footer">
      <!-- v-if="orderArr.length > 0" -->
      <view
        class="item"
        v-for="ddItem in orderArr"
        :key="ddItem.id"
        @click="handleClickItem(ddItem)"
      >
        <view class="item-t">
          <view class="txbox2" style="margin-bottom: 20rpx">
            <view class="hswz">公司名称</view>
            <view style="color: #ed4a43">订单状态</view>
          </view>
          <view class="txbox">
            <view style="border-radius: 10rpx; margin-right: 20rpx">
              <van-image
                width="180rpx"
                height="180rpx"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
                style="border-radius: 30rpx"
              />
            </view>
            <view>
              <view class="txbox2" style="width: 470rpx; margin-bottom: 20rpx">
                <view
                  class="overwz"
                  style="font-size: 32rpx; font-weight: bold; width: 350rpx"
                  >商品名称商品名称商品名称商品名称</view
                >
                <view> ￥12 </view>
              </view>
              <view class="txbox2 hswz" style="width: 470rpx">
                <view class="overwz" style="width: 350rpx"
                  >颜色：<text style="margin-left: 20rpx">尺寸：</text></view
                >
                <view> x1 </view>
              </view>
            </view>
          </view>
        </view>
        <view class="item-b">
          <view style="text-align: right; margin: 20rpx 0">
            应付款：<text style="font-size: 32rpx; color: #ed4a43">￥12</text>
          </view>
          <!--待发货显示 -->
          <view v-if="current == 2" class="hsfkbox">
            <u-image
              width="25rpx"
              height="25rpx"
              :src="fhtb"
              style="margin-right: 10rpx"
            ></u-image>
            待发货
            <view class="overwz hswz" style="margin-left: 10rpx; width: 500rpx">
              商家已发货11111111111111111111111111111111111
            </view>
          </view>
          <!--待收货显示 -->
          <view v-if="current == 3" class="hsfkbox">
            <u-image
              width="25rpx"
              height="25rpx"
              :src="fhtb"
              style="margin-right: 10rpx"
            ></u-image>
            已发货
            <view class="overwz hswz" style="margin-left: 10rpx; width: 500rpx">
              商家打包中11111111111111111111111111111111111
            </view>
          </view>
          <!--退款/售后显示 -->
          <view v-if="current == 4" class="hsfkbox">
            <u-image
              width="25rpx"
              height="25rpx"
              :src="tktb"
              style="margin-right: 10rpx"
            ></u-image>
            售后中
            <view class="overwz hswz" style="margin-left: 10rpx; width: 500rpx">
              商家处理中11111111111111111111111111111111111
            </view>
          </view>
          <view class="btns">
            <!-- 待支付 -->
            <view v-if="current == 1">
              <u-button
                size="mini"
                plain
                style="background-color: #fff; color: #999; margin-right: 20rpx"
              >
                取消订单
              </u-button>
              <u-button
                size="mini"
                type="warning"
                style="background-color: #ff6c18"
              >
                立即支付
              </u-button>
            </view>
            <!-- 待发货 -->
            <view v-if="current == 2">
              <u-button
                size="mini"
                plain
                style="background-color: #fff; color: #999; margin-right: 20rpx"
              >
                申请退款
              </u-button>
              <u-button
                size="mini"
                type="warning"
                style="background-color: #ff6c18"
              >
                再次购买
              </u-button>
            </view>
            <!-- 待收货 -->
            <view v-if="current == 3">
              <u-button
                size="mini"
                plain
                style="background-color: #fff; color: #999; margin-right: 20rpx"
                @click="handleApplySh"
              >
                申请售后
              </u-button>
              <u-button
                size="mini"
                plain
                style="background-color: #fff; color: #999; margin-right: 20rpx"
                @click="handleCheckWl"
              >
                查看物流
              </u-button>
              <u-button
                size="mini"
                type="warning"
                style="background-color: #ff6c18"
              >
                确认收货
              </u-button>
            </view>
            <!-- 退款/售后 -->
            <view v-if="current == 4">
              <!-- <u-button
                size="mini"
                plain
                style="background-color: #fff; color: #999; margin-right: 20rpx"
              >
                售后详情
              </u-button> -->
              <u-button
                size="mini"
                type="warning"
                style="background-color: #ff6c18"
              >
                再次购买
              </u-button>
            </view>
          </view>
        </view>
      </view>
      <!-- 返回顶部按钮 -->
      <u-back-top :scroll-top="scrollTop"></u-back-top>
      <!-- <van-empty description="暂无订单" v-else /> -->
      <!-- 申请售后弹框 -->
      <!-- <ApplyShAlert ref="applyShRef"></ApplyShAlert> -->
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { formatTimestamp, dateFormat } from '@/utils/index'
import { onLoad, onShow, onReady, onPageScroll } from '@dcloudio/uni-app'
import { useUserStore } from '@/store'
// import ApplyShAlert from '@/packageG/components/applyShAlert.vue'
import fhtb from '../../static/fhtb.png'
import tktb from '../../static/tktb.png'
const current = ref(0)
const isApp = ref(false)
const orderArr = ref<any>([{}, {}])
const scrollTop = ref(0)
const userStore = useUserStore()
// 声明组件 ref
const applyShRef = ref<any>(null)
const stateList = ref<any>([
  {
    id: `${10},${20},${60},${90},${91}`,
    name: '全部'
  },
  {
    id: 10,
    name: '待支付'
  },
  {
    name: '待发货',
    id: 20
  },
  {
    name: '待收货',
    id: 60
  },
  {
    name: '退款/售后',
    id: `${90},${91}`
  }
])
onShow(() => {
  //   handleGetOrder()
})
// 获取订单列表
const handleGetOrder = async () => {
  uni.showLoading({ title: '加载中', mask: true })
  //   const navItem = stateList.value[current.value]
  // console.log('navItem', navItem)
  try {
    let tempObj = {
      pageIndex: 1,
      detail: true,
      //   statuses: navItem.id,
      userId: userStore.userInfo.id,
      otherColumns: 'user',
      integralsRuleId: 7,
      shopMode: JSON.parse(uni.getStorageSync('hyType')).id
    }
    // const { data } = await orderApi.orderList(tempObj).finally(() => {
    //   uni.hideLoading()
    // })

    // console.log('获取订单列表', data)
    // console.log('orderArr', orderArr.value)
  } catch (e) {
    console.log('获取订单列表错误')
  }
}
// 处理文字
const handleText = (zt: any, ddzt: any) => {
  let str = ''
  switch (zt) {
    case 10:
      str = '待支付'
      break
    case 20:
      str = '待出票'
      break
    case 60:
      str = '已出票'
      break
    case 90:
    case 91:
      str = '已取消'
      break
    case 92:
      str = '已退款'
      break
  }
  if ((zt == 20 && ddzt == 'CLOSE') || (zt == 20 && ddzt == 'GENERATE_FAIL')) {
    str = '出票失败'
  }

  return str
}
// 点击订单
const handleOrderChange = (index: any) => {
  current.value = index
  //   handleGetOrder()
}
// 点击去取票
const handleGoDetail = (ddItem: any) => {
  console.log('dd', ddItem)

  //   uni.navigateTo({ url: `/packageF/pages/ticketCodeDetails/index` })
}
// 点击盒子
const handleClickItem = (ddItem: any) => {
  uni.navigateTo({
    url: `/packageG/pages/supplyChainOrder/orderDetail?orderStatus=${current.value}`
  })
}
// 点击申请售后
const handleApplySh = () => {
  // 调用子组件的打开弹窗方法
  // applyShRef.value.handleOpenAlert()
}
const handleCheckWl = () => {
  uni.navigateTo({ url: `/packageG/pages/supplyChainOrder/logisticsDetail` })
}
//返回顶部,所在的父盒子不能设置高度
onPageScroll((e: any) => {
  scrollTop.value = e.scrollTop
})
</script>
<style lang="scss" scoped>
.header {
  margin-bottom: 20rpx;
}
.footer {
  padding: 0 20rpx;
  .item {
    background-color: #fff;
    width: 710rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    .item-b {
      .hsfkbox {
        display: flex;
        align-items: center;
        height: 60rpx;
        background-color: #f5f5f7;
        border-radius: 10rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
      }
      .btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
}
.hswz {
  color: #999;
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}
.txbox {
  display: flex;
}
.txbox2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
